<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      * {
      }
      .a {
        width: 600px;
        margin: 0 auto;
        margin-top: 200px;
      }

      .a-box {
        border: 1px solid #ccc;
      }

      .a-header {
        padding: 10px;
        background-color: #757778;
      }

      .a-content {
        padding: 10px;
        background-color: #205172;
        color: white;
        display: none;
      }
      .act {
        color: red;
      }
      .at {
        display: block;
      }
    </style>
  </head>
  <!-- 手风琴 -->
  <body>
    <div class="a">
      <div class="a-box">
        <div class="a-header act" onclick="fn('one')" id="one">手风琴</div>
        <div class="a-content at" id="onetext">
          <table>
            <tr>
              <td>a</td>
            </tr>
            <tr>
              <td>a</td>
            </tr>
            <tr>
              <td>a</td>
            </tr>
            <tr>
              <td>a</td>
            </tr>
          </table>
        </div>
      </div>
      <div class="a-box">
        <div class="a-header" onclick="fn('two')" id="two">AAAAA</div>
        <div class="a-content" id="twotext">
          <table>
            <tr>
              <td>a</td>
            </tr>
            <tr>
              <td>a</td>
            </tr>
            <tr>
              <td>a</td>
            </tr>
            <tr>
              <td>a</td>
            </tr>
          </table>
        </div>
      </div>
      <div class="a-box">
        <div class="a-header" onclick="fn('three')" id="three">BBBBBB</div>
        <div class="a-content" id="threetext">
          <table>
            <tr>
              <td>a</td>
            </tr>
            <tr>
              <td>a</td>
            </tr>
            <tr>
              <td>a</td>
            </tr>
            <tr>
              <td>a</td>
            </tr>
          </table>
        </div>
      </div>
      <div class="a-box">
        <div class="a-header" onclick="fn('four')" id="four">CCCCCCCC</div>
        <div class="a-content" id="fourtext">
          <table>
            <tr>
              <td>a</td>
            </tr>
            <tr>
              <td>a</td>
            </tr>
            <tr>
              <td>a</td>
            </tr>
            <tr>
              <td>a</td>
            </tr>
          </table>
        </div>
      </div>
      <div class="a-box">
        <div class="a-header" onclick="fn('fiv')" id="fiv">DDDDDDDD</div>
        <div class="a-content" id="fivtext">
          <table>
            <tr>
              <td>a</td>
            </tr>
            <tr>
              <td>a</td>
            </tr>
            <tr>
              <td>a</td>
            </tr>
            <tr>
              <td>a</td>
            </tr>
          </table>
        </div>
      </div>
      <div class="a-box">
        <div class="a-header" onclick="fn('six')" id="six">EEEEEEEEEE</div>
        <div class="a-content" id="sixtext">
          <table>
            <tr>
              <td>a</td>
            </tr>
            <tr>
              <td>a</td>
            </tr>
            <tr>
              <td>a</td>
            </tr>
            <tr>
              <td>a</td>
            </tr>
          </table>
        </div>
      </div>
    </div>
    <script>
      console.log(div);
      function fn(type) {
        console.log(type);
        var a = document.querySelector("#" + type + "text");
        var b = document.querySelector("#" + type);
        // a.classList.toggle('act')
        if (b.className === "a-header") {
          b.className = "a-header act";
        } else {
          b.className = "a-header";
        }

          if (a.className === "a-content") {
          a.className = "a-content at";
        } else {
          a.className = "a-content";
        }


        console.log(b);
      }
    </script>
  </body>
</html>
